<template>
  <div class="invite-container">
    <h1 class="mb-4">
      <n-gradient-text type="info"> 推广计划 </n-gradient-text>
    </h1>
    <n-card title="推广邀请" size="huge" hoverable>
      <template #header-extra>
        <n-button type="info" round>佣金比例（15%）</n-button>
      </template>
      <div>
        <div class="text-6xl">{{Number(inviteCount).toFixed(2)}}金币</div>
        <div class="mt-2">
          当前总计可用金币，可用于兑换套餐，邀请好友注册后，您将获得5积分，有效期1天
        </div>
        <!-- <div class="mt-2">
          <n-button type="primary" @click="showModal = true">兑换套餐</n-button>
        </div> -->

        <n-divider title-placement="center">
          <span>邀请信息</span>
        </n-divider>

        <div>
          <div class="text-2xl mb-5 flex gap-2">
            我的邀请码：{{ inviteCode
            }}<n-button type="default" size="small" ghost @click="copy(inviteCode)">
              复制
            </n-button>
          </div>
          <n-input-group>
            <n-button type="default"> 邀请连接 </n-button>
            <n-input :value="inviteUrl" :style="{ width: '50%' }" />
            <n-button type="default" ghost @click="copy(inviteUrl)"> 复制 </n-button>
          </n-input-group>
        </div>
      </div>
    </n-card>
    <!-- 记录 -->
    <n-card size="huge" hoverable class="mt-5">
      <n-tabs type="segment" animated size="large">
        <n-tab-pane name="tab1" tab="推广记录">
          <n-data-table
            :columns="columns"
            :data="data"
            :bordered="false"
            :pagination="true"
          />
        </n-tab-pane>
        <n-tab-pane name="tab2" tab="消耗记录">
          <n-data-table
            :columns="columns"
            :data="data"
            :bordered="false"
            :pagination="true"
          />
        </n-tab-pane>
        <n-tab-pane name="tab3" tab="邀请列表">
          <n-data-table
            :columns="columns"
            :data="data"
            :bordered="false"
            :pagination="true"
          />
        </n-tab-pane>
      </n-tabs>
    </n-card>

    <!-- zhif -->
    <PayModel v-model:show="showModal" />
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import {
  NGradientText,
  NCard,
  NButton,
  NInput,
  NDivider,
  NTabPane,
  NTabs,
  NDataTable,
  useMessage,
} from "naive-ui";
import PayModel from "@/components/payModel/index.vue";
import { copyToClip } from "@/utils/copy";
import { fetchAff, fetchSelf } from "@/api/index.ts";

const message = useMessage();
const showModal = ref(false);
const inviteCode = ref("");
const inviteCount = ref(0);

const inviteUrl = computed(()=>`${location.origin}/login?aff_code=${inviteCode.value}`)

onMounted(async () => {
  const res = await fetchSelf();
  inviteCode.value = res.data.aff_code;
  inviteCount.value = res.data.aff_count;
});

const data = ref([]);

const columns = [
  {
    title: "产品名称",
    key: "name",
  },
  {
    title: "总金额",
    key: "total",
  },
  {
    title: "返佣比例",
    key: "rate",
  },
  {
    title: "获得金币",
    key: "score",
  },
  {
    title: "时间",
    key: "datetime",
  },
];

const copy = async (text) => {
  await copyToClip(text);
  message.success("复制成功");
};
</script>
<style scoped>
.invite-container {
  width: 100%;
  padding: 20px;
}
h1 {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}
</style>
